import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { CheckCircle, Users, Zap, TrendingUp, Gauge, Clock, Package, FileText, ChevronRight } from 'lucide-react';
import Link from 'next/link';
import React from 'react';

export default function LandingPage() {
  
  return (
    <div className="flex-1 min-h-screen w-full bg-white dark:bg-gray-950">
      {/* Hero Section - Minimalist with clear value proposition */}
      <section className="w-full py-24 lg:py-40 relative overflow-hidden">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mx-auto">
            <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-center mb-6">
              通过<span className="text-blue-600 dark:text-blue-500"> 敏捷之道 </span>提升团队效率
            </h1>
            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 text-center mb-10 max-w-2xl mx-auto">
              简约高效的 Scrum 方法论工具，为您的产品开发注入新活力
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4 sm:gap-6">
              <Link href="/workspace">
                <Button size="lg" className="w-full sm:w-auto px-8 py-6 text-base">
                  开始使用 <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Link href="/documentation">
                <Button variant="outline" size="lg" className="w-full sm:w-auto px-8 py-6 text-base">
                  了解更多
                </Button>
              </Link>
            </div>
          </div>
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 to-indigo-50 -z-10 dark:from-gray-900 dark:to-gray-800"></div>
      </section>

      {/* Core Features Section - Clean grid with focused content */}
      <section id="features" className="w-full py-24  bg-gray-50  dark:bg-gray-950">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
              <span className="text-blue-600 dark:text-blue-500">敏捷之道 </span>核心特点
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              专注高效的产品管理系统，助力团队持续交付高质量产品
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-0 shadow-lg dark:bg-gray-900">
              <CardContent className="flex flex-col items-center p-8">
                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-full mb-6">
                  <CheckCircle className="h-8 w-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-bold mb-3">迭代开发</h3>
                <p className="text-center text-gray-600 dark:text-gray-300">通过短周期规划实现持续交付与快速反馈，提升产品迭代效率</p>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg dark:bg-gray-900">
              <CardContent className="flex flex-col items-center p-8">
                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-full mb-6">
                  <Users className="h-8 w-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-bold mb-3">自组织团队</h3>
                <p className="text-center text-gray-600 dark:text-gray-300">赋能团队自主决策，提高责任感与创新能力，激发团队潜能</p>
              </CardContent>
            </Card>
            <Card className="border-0 shadow-lg dark:bg-gray-900">
              <CardContent className="flex flex-col items-center p-8">
                <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-full mb-6">
                  <TrendingUp className="h-8 w-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="text-xl font-bold mb-3">持续改进</h3>
                <p className="text-center text-gray-600 dark:text-gray-300">定期回顾与数据驱动，不断优化流程与产品质量，促进团队成长</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Product Features - Clean minimal cards */}
      <section id="product-features" className="w-full py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">全面的产品功能</h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              一站式敏捷管理平台，满足产品开发全生命周期需求
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <FeatureCard icon={<Package />} title="产品管理" description="创建并管理产品开发全流程，确保项目高效推进" />
            <FeatureCard icon={<FileText />} title="文档管理" description="AI辅助产品文档撰写，提升文档质量与创建效率" />
            <FeatureCard icon={<Users />} title="团队管理" description="灵活管理团队角色与权限，优化协作流程" />
            <FeatureCard icon={<CheckCircle />} title="用户故事地图" description="直观规划用户旅程与产品功能，明确开发方向" />
            <FeatureCard icon={<Zap />} title="产品待办" description="智能优先级排序，聚焦最具价值的开发任务" />
            <FeatureCard icon={<Clock />} title="Sprint 迭代管理" description="科学规划迭代周期，确保高质量按时交付" />
            <FeatureCard icon={<TrendingUp />} title="Sprint 任务管理" description="精细化任务跟踪，提升团队协作与完成率" />
            <FeatureCard icon={<Clock />} title="工时管理" description="科学记录与分析工作时间，优化资源分配" />
            <FeatureCard icon={<Gauge />} title="数据仪表盘" description="可视化项目进展与团队表现，支持决策优化" />
          </div>
        </div>
      </section>

      {/* Value Proposition - Clean, minimalist boxes */}
      <section id="why-scrum" className="w-full py-24 bg-gray-50 dark:bg-gray-950">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">
              为什么选择<span className="text-blue-600 dark:text-blue-500">敏捷之道</span>
            </h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              专为追求卓越的团队设计，助您实现高效敏捷开发
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <ValueCard 
              title="简洁与高效" 
              description="简约界面设计与精炼功能，降低认知负担，让团队专注于任务完成，提升工作效率" 
            />
            <ValueCard 
              title="专注与优先" 
              description="科学设定短期目标，确保团队精力集中于最具价值的任务，避免资源分散" 
            />
            <ValueCard 
              title="透明与协作" 
              description="实时可视化工作进展，提升团队协作效率与决策透明度，使项目进度可预测可控" 
            />
            <ValueCard 
              title="持续优化" 
              description="数据驱动的反馈机制，促进团队不断改进流程，提升产品质量与适应能力" 
            />
          </div>
        </div>
      </section>

      {/* Testimonials - Elegant, minimal design */}
      <section id="testimonials" className="w-full py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">客户评价</h2>
            <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              了解敏捷之道如何帮助其他团队提升效率与产品质量
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <TestimonialCard 
              quote="采用敏捷之道后，我们的产品交付速度提升了40%，客户满意度显著提高。" 
              author="Jhonny，技术总监" 
            />
            <TestimonialCard 
              quote="敏捷之道帮助我们高效管理复杂产品开发，显著减少交付延期，提升了团队士气。" 
              author="William，项目经理" 
            />
            <TestimonialCard 
              quote="使用敏捷之道后，团队协作更紧密，创新氛围更浓厚，产品质量明显提升。" 
              author="Ivan，开发团队负责人" 
            />
          </div>
        </div>
      </section>

      {/* CTA Section - Bold, clear call to action */}
      <section className="w-full py-20 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700">
        <div className="container mx-auto px-6">
          <div className="flex flex-col items-center max-w-2xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-white mb-6">
              准备好提升您的团队效率了吗？
            </h2>
            <p className="text-lg text-white/90 mb-10">
              立即使用<span className="font-semibold">敏捷之道</span>，开启高效敏捷开发新篇章
            </p>
            <Link href="/workspace">
              <Button size="lg" variant="secondary" className="px-8 py-6 text-base font-medium">
                立即开始 <ChevronRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

// Component for feature cards
function FeatureCard({ icon, title, description }) {
  return (
    <Card className="border-0 shadow-sm hover:shadow-md transition-shadow duration-300 dark:bg-gray-800">
      <CardContent className="flex flex-col items-center p-6">
        <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-full mb-4">
          {React.cloneElement(icon, { className: "h-6 w-6 text-blue-600 dark:text-blue-400" })}
        </div>
        <h3 className="text-lg font-semibold mb-2">{title}</h3>
        <p className="text-center text-gray-600 dark:text-gray-300 text-sm">{description}</p>
      </CardContent>
    </Card>
  );
}

// Component for value proposition cards
function ValueCard({ title, description }) {
  return (
    <div className="bg-gray-50 dark:bg-gray-900 p-8 rounded-lg border border-gray-100 dark:border-gray-800">
      <h3 className="text-xl font-semibold mb-3">{title}</h3>
      <p className="text-gray-600 dark:text-gray-300">{description}</p>
    </div>
  );
}

// Component for testimonial cards
function TestimonialCard({ quote, author }) {
  return (
    <Card className="border-0 shadow-sm dark:bg-gray-800">
      <CardContent className="p-8">
        <div className="mb-4 text-blue-600 dark:text-blue-400">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.667 18.667H6.66699C6.66699 14.667 7.33366 12.667 9.33366 11.333C9.66699 11.333 10.0003 11 10.0003 10.667V7.33301C10.0003 6.66634 9.33366 6.33301 9.00033 6.33301C4.00033 8.33301 2.66699 12.333 2.66699 20H10.667C11.4003 20 12.0003 19.4 12.0003 18.667V20C12.0003 15.6 8.40033 12 4.00033 12V14C7.33366 14 10.0003 16.667 10.0003 20V26.667C10.0003 27.4 9.40033 28 8.66699 28H4.00033C3.26699 28 2.66699 27.4 2.66699 26.667V22C2.66699 21.267 3.26699 20.667 4.00033 20.667H10.667V18.667ZM26.667 18.667H22.667C22.667 14.667 23.3337 12.667 25.3337 11.333C25.667 11.333 26.0003 11 26.0003 10.667V7.33301C26.0003 6.66634 25.3337 6.33301 25.0003 6.33301C20.0003 8.33301 18.667 12.333 18.667 20H26.667C27.4003 20 28.0003 19.4 28.0003 18.667V20C28.0003 15.6 24.4003 12 20.0003 12V14C23.3337 14 26.0003 16.667 26.0003 20V26.667C26.0003 27.4 25.4003 28 24.667 28H20.0003C19.267 28 18.667 27.4 18.667 26.667V22C18.667 21.267 19.267 20.667 20.0003 20.667H26.667V18.667Z" fill="currentColor"/>
          </svg>
        </div>
        <p className="italic mb-6 text-gray-700 dark:text-gray-200">{quote}</p>
        <p className="font-medium text-gray-800 dark:text-gray-100">{author}</p>
      </CardContent>
    </Card>
  );
}
